<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的模板语法</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count" :title="title">计数器：{{count}}</div>
			<div class="count" v-text="count" :title="title"></div>
			<div class="strong" v-html="html"></div>
			<input type="text" :placeholder="placeholder" :disabled="disabled" :style="style" v-model="name"/>
			<button @click="updatePlaceholder()">我是点击按钮</button>
			<div class="studentName" v-if="nameCont == 1">刘畅</div>
			<div class="studentName" v-else-if="nameCont == 2">韦莎</div>
			<div class="studentName" v-else>郭文兰</div>
			<table border="1" style="text-align: center;">
				<tr>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>选择数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="val,index in amountPrice">
					<td>{{val.title}}</td>
					<td>{{val.price}}元</td>
					<td>{{val.choosedNum}}</td>
					<td>{{val.allPrice}}元</td>
					<td>
						<button @click="goodsIncrese(index)">增加</button>
						<button @click="goodsDecrese(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">支付金额</td>
					<td>{{payPrice}}元</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	// 解构
	const {createApp} = Vue;
	// 创建APP实例
	const app = createApp({
		// template:``
		data() {
			return{
				// {{}}:插值语法,v-text也是插值语法
				count:0,
				// v-bind语法，属性绑定语法,简写为：:
				title:'这是一个计数器',
				placeholder:'请输入姓名',
				disabled:false,
				style:`color:green;font-size:30px;`,
				// v-html:类似于innerHTML
				html:'<strong>我是加粗的字体</strong>',
				// v-on:方法绑定，简写为：@
				// v-model:双向数据绑定
				name:'',
				// if/else if/else
				nameCont:1,
				// v-for:循环结构
				goods:[{title:'柠檬茶',price:10,choosedNum:0},{title:'乌龙茶',price:30,choosedNum:0},{title:'茉莉花茶',price:20,choosedNum:0}],
				// 计算器computed/计算属性
				// 侦听器watch
			}
		},
		methods:{
			updatePlaceholder(e){
				console.log(e);
				this.placeholder = '请输入自我介绍'
			},
			// 商品增加方法
			goodsIncrese(index){
				this.goods[index].choosedNum++
			},
			// 商品减少方法
			goodsDecrese(index){
				if(this.goods[index].choosedNum <= 0){
					return
				}
				this.goods[index].choosedNum--
			}
		},
		// 计算属性
		computed:{
			amountPrice(){
				console.log(123);
				return this.goods.map(val =>{
					const allPrice = val.choosedNum * val.price;
					return {
						...val,
						allPrice
					}
				})
			},
			payPrice(){
				let totalPrice = 0;
				this.amountPrice.forEach(val => {
					totalPrice += val.allPrice
				})
				return totalPrice;
			}
		},
		// 挂载之后的周期函数
		mounted() {
			setInterval(()=>{
				this.count++
			},1000)
		},
		// 侦听器
		watch:{
			count(newVal,oldVal){
				console.log(`变化之前的值：${oldVal}，变化之后的值：${newVal}`);
			}
		}
	});
	// 实例化视图数据连接层(挂载)
	const vm = app.mount('#app')
</script>